<template>
	<view class="organization">
		<!-- #ifdef APP-PLUS || MP-->
		<app-plus-bar />
		<!-- #endif -->
		<uni-nav-bar :fixed="true" title="去哪学" :shadow='false' color="#fff" background-color="#0AAFFF" right-icon="search"
		 left-icon="location" @click-left="_handleLeft" @click-right="_handleRight">
		</uni-nav-bar>
		<tab-list :tabList='tabList' :_handleTab="_handleTab" />
		<view class="serchBox" v-show='serchShow'>
			<uni-nav-bar :fixed="true" :shadow='false' color="#fff" right-text="取消" background-color="#0AAFFF" @click-right="_handleSerchRight">
				<view class="input-view">
					<uni-icon type="search" size="22" color="#fff" />
					<input confirm-type="search" class="input" type="text" placeholder="机构名称" @confirm="confirm" />
				</view>
			</uni-nav-bar>
			<view class="hotSerch">
				<view class="hotSetchText">热门搜索</view>
				<view class="serchListBox">
					<view class="serchitem" v-for="item,index in srchItem" :key='index'>{{item}}</view>
				</view>
			</view>
		</view>
		<view class="hotBox">
			<content-list :contentList='contentList' />
		</view>
	</view>

</template>

<script>
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	import uniIcon from '@/components/uni-icon/uni-icon.vue'
	import contentList from '@/components/contentList.vue'
	import tabList from '@/components/tabList.vue'
	import appPlusBar from '@/components/appPlusBar.vue'

	export default {
		components: {
			uniNavBar,
			uniIcon,
			contentList,
			tabList,
			appPlusBar
		},
		data() {
			return {
				serchShow: false,
				srchItem: [
					'东方童花', '还好', '啊啊啊', '东方童花', '东方童花',
					'东方童花', '东方童花', '东方童花', '东方童花',
				],
				tabList: [{
					name: '周边',
					id: 0
				}, {
					name: '类别',
					id: 1
				}, {
					name: '排序',
					id: 2
				}, ],
				contentList: [{
						title: "幸福",
						address: '浦东新区',
						content: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情能和心爱的人一起睡觉，是件幸福的事情",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						title: "木屋",
						address: '浦东新区',
						content: "想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖。",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						title: "CBD",
						address: '浦东新区',
						content: "烤炉模式的城，到黄昏，如同打翻的调色盘一般。",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						title: "幸福",
						address: '浦东新区',
						content: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情能和心爱的人一起睡觉，是件幸福的事情",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						title: "木屋",
						address: '浦东新区',
						content: "想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖。",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						title: "CBD",
						address: '浦东新区',
						content: "烤炉模式的城，到黄昏，如同打翻的调色盘一般。",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						title: "幸福",
						address: '浦东新区',
						content: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？能和心爱的人一起睡觉，是件幸福的事情能和心爱的人一起睡觉，是件幸福的事情",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/shuijiao.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						title: "木屋",
						address: '浦东新区',
						content: "想要这样一间小木屋，夏天挫冰吃瓜，冬天围炉取暖。",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/muwu.jpg?imageView2/3/w/200/h/100/q/90"
					},
					{
						title: "CBD",
						address: '浦东新区',
						content: "烤炉模式的城，到黄昏，如同打翻的调色盘一般。",
						img: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/cbd.jpg?imageView2/3/w/200/h/100/q/90"
					}
				]
			}
		},
		onLoad() {},
		methods: {
			_handleTab(index) {
				setTimeout(() =>{
					console.log('模拟请求接口',index)
					this.contentList = []
				},2000)
			},
			_handleLeft() {
				uni.showToast({
					title: 'left'
				});
			},
			_handleRight() {
				this.serchShow = true
			},
			_handleSerchRight() {
				this.serchShow = false
			}
		}
	}
</script>
<style scoped lang=scss>
	.organization {
		position: relative;
		.hotBox {
			padding-top: 88upx;
		}

		.serchBox {
			width: 100%;
			position: absolute;
			top: 80upx;
			/*  #ifdef  MP  */
			top: 160upx;
			/*  #endif  */
			left: 0;
			z-index: 9999;

			.hotSerch {
				background: #f1f1f1;
				padding: 8upx;
				color: #A5A5A5;

				.hotSetchText {
					font-size: 34upx;
					line-height: 80upx;
				}

				.serchListBox {
					font-size: 30upx;
					display: flex;
					flex-wrap: wrap;

					.serchitem {
						margin: 0 20upx 20upx 0;
						min-width: 80upx;
						height: 60upx;
						line-height: 60upx;
						padding: 0 16upx;
						background: #fff;
						border: 1px solid #e5e5e5;

						&:nth-child(1) {
							color: red;
						}
					}
				}
			}

			.input-placeholder {
				color: #fff !important;
			}

			.uni-navbar__header-btns:last-child {
				width: 100upx;
			}


			.input-view {
				width: 90%;
				display: flex;
				align-items: center;
				background-color: rgba(0, 0, 0, 0.2);
				height: 60upx;
				border-radius: 30upx;
				padding: 0 4%;
				flex-wrap: nowrap;
				margin: 14upx 0;
				line-height: 60upx;
			}

			.input-view .uni-icon {
				line-height: 30px !important;
			}
		}

	}
</style>
